<template>
  <el-dialog title="图纸附件上传" :visible.sync="dialogVisible" width="500px" top="400px">
    <el-upload drag class="upload-demo" :headers="headers" action="http://localhost:8080/bydProductionPlan/process-by-part"
      :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
      :on-success="handleSuccess" :on-exceed="handleExceed" :on-error="handleError" :file-list="fileList">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传pdf文件，且不超过200MB
      </div>
    </el-upload>
  </el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
  props: {},
  data() {
    return {
      fileList: [],
      dialogVisible: false,
      headers: { authorization: "Bearer " + getToken() },
    };
  },
  watch:{
    dialogVisible(val){
      if(!val){
        this.fileList=[]
      }
    }
  },
  methods: {
    showDialog() {
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      );
    },
    handleSuccess(e) {
      if (e.code === 200) {
        this.$message.success("上传成功");
        this.$emit("refresh");
        this.dialogVisible = false
      } else {
        this.fileList.splice(this.fileList.length - 1, 1);
        this.$message.error(e.msg);
      }
    },
    handleError(e) {
      this.$message.error(e);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style lang="css">
.upload-demo {
  text-align: center;
}
</style>
